<template>
	<div class="personalList">
		<ul class="tool-list">
            <li class="item msg">
                <router-link to="/Recharge" class="flex">
                    <img class="icon" src="../assets/images/jinbichongzhi.png">
                    <span class="text-beyond align-right tag">充值中心</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>
            <li class="item sysmsg msg">
                <router-link to="/Message"  class="flex">
                    <img class="icon" src="../assets/images/xitongxiaoxi.png">
                    <span class="text-beyond align-right tag">消息中心</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>
            <li class="item item-top msg">
                <router-link to="/Consumercenter" class="flex">
                    <img class="icon" src="../assets/images/xiaofeijilu.png">
                    <span class="text-beyond align-right tag">消费记录</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>

            <li class="item item-bottom msg">
                <router-link to="/Backpack"  class="flex">
                    <img class="icon" src="../assets/images/beibaojilu.png">
                    <span class="text-beyond align-right tag">背包记录</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>
            <li class="item item-top msg">
                <router-link to="/Myorder"  class="flex">
                    <img class="icon" src="../assets/images/wodedingdan.png">
                    <span class="text-beyond align-right tag">我的订单</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>
            <li class="item item-bottom msg">
                <router-link to="/Invitation" class="flex">
                    <img class="icon" src="../assets/images/invitation.jpg">
                    <span class="text-beyond align-right tag">邀请好友</span>
                    <img class="icon-next " src="../assets/images/rightrow.png">
                </router-link>
            </li>
        </ul>
	</div>
</template>

<script type="text/javascript">
	import { mapMutations } from "vuex"
	export default{
		name:"personalList",
		methods:{
			...mapMutations([
	  			"go"
	  		])
		}
	}
</script>

<style lang="less" scoped>
	.align-right{
		margin-right: auto;
	}
	.tool-list {
	    width: 100%;
	    .item {
		    background: #fff;
		    padding: 10px 15px;
		    border-bottom: 1px dashed #f2f2f2;
		    position: relative;
		    .tag {
			    font-size: 15px;
			}
			.icon-next {
			    width: 10px;
			}
			.icon {
			    width: 30px;
			    margin-right: 10px;
			}

		}
		.item-top {
		    margin-top: 5px;
		    border-top-right-radius: 5px;
		    border-top-left-radius: 5px
		}
		.item-bottom {
		    margin-top: 0;
		    border-bottom-right-radius: 5px;
		    border-bottom-left-radius: 5px;
		    border: none
		}
		.sysmsg.msg:before {
		    display: block;
		    content: "";
		    width: 8px;
		    height: 8px;
		    border-radius: 50%;
		    background: #ff5d01;
		    position: absolute;
		    top: 10px;
		    left: 45px;
		}
	}
</style>















